<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<template>
  <div class="app-container home">
    <!-- 第一个图表容器 -->
    <div id="main" style="width: 600px; height: 400px;"></div>
   <!--    地图-->
    <div id="container" style="width: 600px; height: 400px;"></div>
    <!-- 第二个图表容器 -->
    <div id="myChart2" style="width: 600px; height: 400px;"></div>
  </div>
</template>
<!--<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=nnsBMRpjjM01MGzYGAqShuFph56aQdIS"/>-->
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=FTRBZ-32XWW-JRFR2-3TQDN-7JAVV-CWBNN"></script>



<script>

import * as echarts from 'echarts';
import { ListgetJing, ListgetYuan ,ListgetZai,ListgetXz,ListgetDbf,ListgetDbs,ListgetDqy} from '@/api/index'



export default {
  name: 'Home',
  data() {
    return {
      myChart: null,
      myChart2: null, // 新增一个变量来存储第二个图表实例
      yuanData: [], // 用于存储 y 轴的数据
      jingData:[],
      zaiyongData:[],
      xianzhiData:[],
      daiqiyData:[],
      daibaofData:[],
      daibaosData:[],
      loading: false, // 添加一个 loading 状态
    };
  },

  mounted() {

    this.getYuanList();
    this.initMap();


  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
    if (this.myChart2) {
      this.myChart2.dispose();
    }
  },

  methods: {
    async getYuanList() {
      this.loading = true;
      try {
        const response1 = await ListgetYuan();
        this.yuanData = response1.data; // 假设 response.data 是数组 [100, 200, 300, 400, 500, 600]
        const response2 = await ListgetJing();
        this.jingData = response2.data; // 假设 response.data 是数组 [100, 200, 300, 400, 500, 600]

        const response3= await ListgetZai();
        this.zaiyongData = response3.data; // 假设 response.data 是数组 [100, 200, 300, 400, 500, 600]
          const response4= await ListgetXz();
        this.xianzhiData = response4.data; // 假设 response.data 是数组 [100, 200, 300, 400, 500, 600]
        const response5= await ListgetDbf();
        this.daibaofData = response5.data; // 假设 response.data 是数组 [100, 200, 300, 400, 500, 600]
        const response6= await ListgetDbs();
        this.daibaosData = response6.data; // 假设 response.data 是数组 [100, 200, 300, 400, 500, 600]
        const response7= await ListgetDqy();
        this.daiqiyData = response7.data; // 假设 response.data 是数组 [100, 200, 300, 400, 500, 600]
        this.initChart(); // 确保在数据加载完成后初始化图表
        this.initChart2(); // 初始化第二个图表
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        this.loading = false;
      }
    },
    initChart() {
      var chartDom = document.getElementById('main');
      this.myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: 'World Population'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['打印机', '投影仪', '投影幕', '多功能一体机', '照相机', '电子白板']
        },
        series: [
          {
            name: '原值',
            type: 'bar',
            data: this.yuanData // 确保这里使用的是 this.yuanData
          },
          {
            name: '净值',
            type: 'bar',
            data: this.jingData // 直接使用数值数组
          }
        ]
      };
      this.myChart.setOption(option);
    },
    initChart2() {
      var chartDom2 = document.getElementById('myChart2');
      this.myChart2 = echarts.init(chartDom2);
      var option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data:['打印机', '投影仪', '投影幕', '多功能一体机', '照相机', '电子白板']
        },
        series: [
          {
            name: '在用',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.zaiyongData
          },
          {
            name: '闲置',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.xianzhiData
          },
          {
            name: '待启用',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data:this.daiqiyData
          },
          {
            name: '待报废',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.daibaofData
          },
          {
            name: '待报损',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data:this.daibaosData
          }
        ]
      };
      this.myChart2.setOption(option2);
    },
    initMap() {
      // var map = new BMapGL.Map("container");          // 创建地图实例
      // var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标
      // map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
      // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // map.setHeading(64.5);   //设置地图旋转角度
      // map.setTilt(73);       //设置地图的倾斜角度
      //
      // // 禁止地图旋转和倾斜可以通过配置项进行设置
      // var map = new BMapGL.Map("allmap",{
      //   enableRotate: false,
      //   enableTilt: false
      // });



    },
  }

};

</script>
<style scoped lang="scss">
/* 您可以在这里添加样式 */
.app-container.home {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: space-between; /* 子元素之间均匀分布 */
}
#main, #myChart2 {
  margin-bottom: 20px; /* 添加一些间距 */
}
#container {
  width: 1300px;
  height: 600px;
  border: 1px solid #999;
}
</style>


